<template>
    <div class="wrapper">
        <!-- 报表标题组件-->
        <ReportTitle :titleInfo="titleInfo" :isExport="false" :isAdd="false" />
        <div class="userMain">
            <div class="left main-item">
                <span class="title">基础信息</span>
                <ReportSearch :searchFormDatas="searchFormDatas" v-model:searchForm="searchForm" :isBtnShow="false" />
            </div>
            <div class="right main-item">
                <span class="title">角色权限</span>
                <div class="tabs">
                    <el-radio-group v-model="curTab">
                        <div v-for="tabKey in Object.keys(tabDatas)" :key="tabKey" class="tab-item" :class="{ 'activeTab': tabKey === curTab }">
                            <el-radio :value="tabKey" size="large" :disabled="tabDatas[tabKey]['disabled']">{{ tabDatas[tabKey]['label']}}</el-radio>
                        </div>
                    </el-radio-group>
                </div>
                <div class="roleBox">
                    <el-scrollbar style="height:calc(100vh - 310px)">
                        <el-tree ref="treeRef" :data="treeData" class="eq-tree" show-checkbox node-key="nodeId" :props="defaultProps" :default-expanded-keys="defaultExpandKeys"></el-tree>
                    </el-scrollbar>
                </div>
            </div>
        </div>
        <div class="userFooter">
            <span class="resetBtn" @click="handleCancel">取消</span>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

import ReportTitle from '@/components/reportTitle/index.vue';
import ReportSearch from '@/components/reportSearch/index.vue';

import * as server from '@/api/modules/systemManage';
import { apiFn } from '@/utils/utilFns';

const emit = defineEmits(['updateRoleInfo']);

const props = defineProps({
    roleInfo: {
        type: Object,
        default: () => {}
    }
}); 

const defaultProps = {
    children: 'childrenList',
    label: 'text'
};

// 报表标题信息
const titleInfo = reactive({
    title: '角色预览',
    description: ""
});

// 当前标签页
const curTab = ref('dataPlatform');
const curSource = ref('1');

const treeRef = ref(null);
const checkedKeys = ref([]);
const treeData = ref([]);
const defaultExpandKeys = ref([]);

// 默认表单数据
const searchForm = reactive({
    roleName: '',
    remark: ''
});

const tabDatas = reactive({
    'dataPlatform': {
        label: '数据管理平台',
        source: '1',
        datas: [], 
        disabled: false
    },
    'maintenancePlatform': {
        label: '智慧机务平台',
        source: '9',
        datas: [],
        disabled: false
    },
    'dataCloseloop': {
        label: '数据闭环平台',
        source: '10',
        datas: [],
        disabled: false
    }
});

// 检索条件数据
const searchFormDatas = ref([
    {
        id: 0,
        type: 'input',
        prop: 'roleName',
        label: '角色名称',
        api: () => { },
        placeholder: '请输入用户名',
        disabled: true,
        rules: [{ required: true, message: '角色名称不能为空', trigger: ['blur, change'] }]
    }, {
        id: 1,
        type: 'inputArea',
        prop: 'remark',
        label: '备注信息',
        api: () => { },
        disabled: true
    }
]);

onMounted(() => {
    getRoleDetail();
    initRoleData();
});

const handleCancel = () => {
    emit('updateRoleInfo', { type: 'list', roleInfo: {} });
};

// 获取权限列表
const getPromissionList = () => {
    const params = { source: curSource.value  };

    apiFn(server.getPermissionTree, params)
        .then((res) => {
            const { data = [] } = res;
            treeData.value = data
            defaultExpandKeys.value = data[0]?.nodeId;
            setDisabledTree();
        }).catch(() => {
            treeData.value = [];
        });
};

// 获取角色详情
const getRoleDetail = () => {
    const { id } = props.roleInfo;
    const params = { roleId: id };

    apiFn(server.queryRole, params)
        .then((res) => {
            const { code, data = {} } = res;
            if(code === '200'){
                const { permissionIds } = data;
                checkedKeys.value = permissionIds;
                const keys = permissionIds.split(',');
                treeRef.value && treeRef.value.setCheckedKeys(keys);
            }
        }).catch(() => {
            ElMessage.error('角色详情获取失败!');
        });
};

// 初始化角色详情数据
const initRoleData = (data = {}) => {
    const { remark, roleName, roleSource } = props.roleInfo;  
    
    [ searchForm.remark, searchForm.roleName ] = [ remark, roleName ]; 
    curSource.value = roleSource;
    
    getPromissionList();
    setDisabledTabs();
};

// 禁用tab页
const setDisabledTabs = () => {
    Object.keys(tabDatas).forEach(key => {
        if(tabDatas[key]['source'] !== curSource.value){
            tabDatas[key]['disabled'] = true;
        }else{
            tabDatas[key]['disabled'] = false;
        }
    });
};

// 禁用树
const setDisabledTree = () => {
    const recusive = (datas) => {
        datas.forEach(data => {
            const { childrenList } = data;
            
            if(childrenList.length){
                recusive(childrenList);
            }
            data.disabled = true;
        });
    };
    
    recusive(treeData.value);
};

</script>